<template>
  <view class="container">
    <!-- 个人信息区域 -->
    <view class="user-info">
      <view class="avatar-wrap">
        <image class="avatar" :src="'https://ai-public.mastergo.com/ai/img_res/9855077e70652bfcb95797e9b0168253.jpg'" mode="aspectFill" />
      </view>
      <view class="user-detail">
        <text class="username">李白</text>
        <text class="user-level">尊贵会员</text>
      </view>
    </view>

    <!-- 订单管理 -->
    <view class="order-section">
      <view class="section-title">
        <text>我的订单</text>
        <view class="more">
          <text class="more-text">查看全部订单</text>
          <uni-icons type="right" size="14" color="#666666"></uni-icons>
        </view>
      </view>
      <view class="order-types">
        <view class="order-item" v-for="(item, index) in orderTypes" :key="index">
          <view class="icon-wrapper">
            <uni-icons :type="item.icon" size="24" color="#FF8C00"></uni-icons>
          </view>
          <text class="order-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 个人资料卡片 -->
    <view class="profile-section">
      <view class="profile-item" v-for="(item, index) in profileItems" :key="index">
        <view class="item-left">
          <uni-icons :type="item.icon" size="20" color="#4A3B2A"></uni-icons>
          <text class="item-text">{{ item.text }}</text>
        </view>
        <uni-icons type="right" size="14" color="#666666"></uni-icons>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-wrap">
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item" v-for="(item, index) in tabItems" :key="index">
        <uni-icons :type="item.icon" size="24" :color="currentTab === index ? '#FF8C00' : '#4A3B2A'"></uni-icons>
        <text class="tab-text" :class="{ active: currentTab === index }">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 3,
      orderTypes: [
        { icon: 'wallet', text: '待付款' },
        { icon: 'shop', text: '待发货' },
        { icon: 'car', text: '待收货' },
        { icon: 'chat', text: '待评价' }
      ],
      profileItems: [
        { icon: 'person', text: '个人资料' },
        { icon: 'location', text: '收货地址' },
        { icon: 'locked', text: '账号安全' },
        { icon: 'help', text: '帮助中心' }
      ],
      tabItems: [
        { icon: 'home', text: '首页' },
        { icon: 'list', text: '分类' },
        { icon: 'cart', text: '购物车' },
        { icon: 'person', text: '我的' }
      ]
    }
  },
  methods: {
    handleLogout() {
      // 处理退出登录逻辑
      uni.showModal({
        title: '提示',
        content: '确认退出登录吗？',
        success: function (res) {
          if (res.confirm) {
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            });
          }
        }
      });
    }
  }
}
</script>

<style>
page {
  height: 100%;
  background-color: #F5E6CA;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 40rpx 0;
}

.avatar-wrap {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  overflow: hidden;
  border: 4rpx solid #FF8C00;
}

.avatar {
  width: 100%;
  height: 100%;
}

.user-detail {
  margin-left: 30rpx;
}

.username {
  font-size: 18px;
  color: #4A3B2A;
  font-weight: bold;
}

.user-level {
  display: block;
  font-size: 14px;
  color: #FF8C00;
  margin-top: 10rpx;
}

.order-section, .profile-section {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-top: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  color: #4A3B2A;
  font-size: 16px;
  font-weight: bold;
}

.more {
  display: flex;
  align-items: center;
}

.more-text {
  font-size: 14px;
  color: #666666;
  margin-right: 6rpx;
}

.order-types {
  display: flex;
  justify-content: space-between;
}

.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.order-text {
  font-size: 14px;
  color: #666666;
  margin-top: 16rpx;
}

.profile-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 2rpx solid #F5E6CA;
}

.profile-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
}

.item-text {
  margin-left: 20rpx;
  font-size: 15px;
  color: #4A3B2A;
}

.logout-wrap {
  margin-top: 60rpx;
  padding: 0 40rpx;
}

.logout-btn {
  background-color: #FFFFFF;
  color: #FF8C00;
  border: 2rpx solid #FF8C00;
  border-radius: 40rpx;
  font-size: 16px;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 2rpx solid #F5E6CA;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-text {
  font-size: 12px;
  color: #4A3B2A;
  margin-top: 6rpx;
}

.tab-text.active {
  color: #FF8C00;
}
</style>
